57.How to set the text style of the VTable table component?—

Question title

How to set text style for VTable component?

Problem description

What text styles are supported and how to configure them when using the VTable table component?

Solution

VTable supports the following text styles:

fontSize : The font size of the text.
FontFamily : Font used for text. Multiple fonts can be specified, such as Arial, sans-serif , and the browser will search and use them in the specified order.
FontWeight : Set font thickness.
FontVariant : Sets the font variant.
fontStyle : Set font style.
The places where VTable supports setting text styles are:
Column (row/indicator) , configure the style corresponding to the column (row/indicator)
Style : The style corresponding to the content cell
headerStyle : the style corresponding to the header cell
In theme , configure the theme style
defaultStyle : default style
bodyStyle : table content area style
headerStyle : header (list)/list header (pivot table) style
rowHeaderStyle : Row header style
cornerHeaderStyle : corner head style
bottomFrozenStyle : Bottom frozen cell style
rightFrozenStyle : Freeze cell style on the right

Code example

You can paste it into the official website editor for testing: https://visactor.io/vtable/demo/table-type/list-table

let  tableInstance;
  fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_data.json')
    .then((res) => res.json())
    .then((data) => {

const columns =[
    {
        "field": "Order ID",
        "title": "Order ID",
        "width": "auto",
        style: {
            fontSize: 14
        },
        headerStyle: {
            fontSize: 16,
            fontFamily: 'Verdana'
        }
    },
    {
        "field": "Customer ID",
        "title": "Customer ID",
        "width": "auto"
    },
    {
        "field": "Product Name",
        "title": "Product Name",
        "width": "auto"
    },
    {
        "field": "Category",
        "title": "Category",
        "width": "auto"
    },
    {
        "field": "Sub-Category",
        "title": "Sub-Category",
        "width": "auto"
    },
    {
        "field": "Region",
        "title": "Region",
        "width": "auto"
    }
];

const option = {
  records:data,
  columns,
  widthMode:'standard',
  theme: VTable.themes.DEFAULT.extends({
    bodyStyle: {
        fontSize: 12
    },
    headerStyle: {
        fontSize: 18
    }
  })
};
tableInstance = new VTable.ListTable(document.getElementById(CONTAINER_ID),option);
window['tableInstance'] = tableInstance;
    })</br>

Question title

Problem description

Solution

Code example

Related Documents